Post was inspired by a comment with a question posted some time ago under the post about hand written signatures. Kevan asked, if this is possible to take a photo, then sketch-note on it and finally save two images as a single one.

I thought that it should be fairly easy and to be honest it was, however I failed on the last step – merging the images. I must really admit it – I didn’t make it on my own. Instead I decided to use free API called “Convert API“. I wanted to make it using Azure Function, but I wasn’t able to do it alone and help didn’t come from anywhere too 🙂

The solution

It is build from the following components:

1. PowerApps – is used for taking a photo and then overlaying notes on it;
2. Blob Storage – used for uploading image from a camera and second one – with sketch-notes, as well as for uploading the final, merged image;
3. Flow – receives all the information about transformations done to the images and overlays and creates HTML merging two images in a single canvas;
4. Convert API – used to perfectly convert HTML into a PNG file 🙂

Sketch-noting in PowerApps

The idea is simple – first user is taking a picture:

Then, can manipulate it (rotate, scale, position) using the available controls:

And finally can append notes:

Finally clicks the button to merge two pictures and gets the result:

And a generated file:

Merging images in PowerApps (and Flow 😉

Flow plays first chair in the solution. First it receives all the information about the transformation done to the image:

Data is passed from PowerApps via function parameters:

Set(
    FileURL,
    Mergedrawingwithphoto.Run(
        "/files/takenNotes.png",
        "/files/takenPhoto.png",
        TakenPhoto.Width,
        TakenPhoto.Height,
        Notes.Width,
        Notes.Height,
        Scale_slider.Value,
        Value(Rotation),
        TakenPhoto.X,
        TakenPhoto.Y
    )
);

Next Flow is downloading photo and notes from the Blob Storage:

Next Flow checks, whether the image was rotated to a vertical position, or is it in horizontal. Based on that it then generates different HTML:

Then it is sending the HTML code to the Convert API service to get back a JSON with PNG file contents:

Lastly, it is parsing the JSON it receives from Convert API and uploads the PNG file contents to Blob Storage, and is returning uploaded file URL back to PowerApps:

body('Parse_Conversion_Body')?['Files'][0]['FileName']
body('Parse_Conversion_Body')?['Files'][0]['FileData']

The working solution

Check how it works:

It does also work fine when using a mobile version:

You can find the app published to PowerApps Community Gallery here:
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/App-for-taking-photos-and-adding-notes/m-p/289368#M186